<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 楼宇管理系统</title>
    <link rel="icon" href="http://localhost:9000/building18/favicon.ico"/>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/axios-interceptors.js"></script>
    <script src="js/vue3.js"></script>
    <script src="js/element-plus.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
    <style>
        :root {
            --primary-color: #2c6fbb;
            --primary-dark: #1d5a9b;
            --primary-light: #e6f0ff;
            --secondary-color: #4caf50;
            --text-color: #333;
            --light-gray: #f5f7fa;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        /* 动态背景元素 */
        .bg-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(100, 200, 255, 0.15);
            animation: float 15s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-20px) translateX(10px); }
            50% { transform: translateY(0) translateX(20px); }
            75% { transform: translateY(20px) translateX(10px); }
        }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .login-card {
            width: 600px; /* 增大宽度实现横版布局 */
            padding: 40px 50px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
            position: relative;
            overflow: hidden;
            transition: var(--transition);
            transform: translateY(0);
        }

        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .login-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            animation: gradientBar 3s infinite alternate;
        }

        @keyframes gradientBar {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        .login-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .system-logo {
            margin-right: 30px;
        }

        .logo {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(44, 111, 187, 0.3);
            animation: pulse 2s infinite;
        }

        .logo i {
            color: white;
            font-size: 45px;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .login-title {
            flex: 1;
        }

        .login-card h2 {
            text-align: left;
            margin-bottom: 10px;
            color: var(--primary-color);
            font-weight: 600;
            font-size: 28px;
            position: relative;
            padding-bottom: 15px;
        }

        .login-card h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            border-radius: 3px;
        }

        .login-card p {
            color: #666;
            font-size: 16px;
            margin-top: 5px;
        }

        .form-container {
            display: flex;
            flex-direction: column;
        }

        .form-item {
            margin-bottom: 25px;
            position: relative;
        }

        .form-item label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
            font-size: 14px;
        }

        .form-item label::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }

        /* 自定义输入框样式 - 单层圆角设计 */
        .custom-input {
            width: 100%;
            height: 48px;
            padding: 0 15px;
            border: 1px solid #dcdfe6;
            border-radius: 10px;
            font-size: 15px;
            transition: var(--transition);
            outline: none;
            background: #f8fafc;
        }

        .custom-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(44, 111, 187, 0.2);
        }

        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            z-index: 2;
        }

        .password-container {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
            z-index: 2;
        }

        .remember-me {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .remember-checkbox {
            width: 18px;
            height: 18px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            margin-right: 8px;
            position: relative;
            cursor: pointer;
        }

        .remember-checkbox.checked::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 1px;
            width: 5px;
            height: 10px;
            border: solid #2c6fbb;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .remember-label {
            color: #555;
            font-size: 14px;
            cursor: pointer;
        }

        .login-btn {
            width: 100%;
            padding: 14px 0;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
            color: white;
            border: none;
            border-radius: 10px;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .login-btn:hover {
            background: linear-gradient(90deg, var(--primary-dark), var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(44, 111, 187, 0.4);
        }

        .login-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20px;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(25deg);
            transition: all 0.6s;
        }

        .login-btn:hover::after {
            left: 120%;
        }

        .copyright {
            text-align: center;
            margin-top: 25px;
            color: #888;
            font-size: 13px;
        }

        @media (max-width: 768px) {
            .login-card {
                width: 90%;
                padding: 30px 25px;
            }

            .login-header {
                flex-direction: column;
                text-align: center;
            }

            .system-logo {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .login-card h2 {
                text-align: center;
            }

            .login-card h2::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
<div id="app">
<!--  样式  -->
    <div>
        <!-- 动态背景粒子 -->
        <div class="bg-particles" id="particles"></div>

        <!-- 登陆框 -->
        <div class="login-container">
            <div class="login-card">
                <div class="login-header">
                    <div class="system-logo">
                        <div class="logo">
                            <i class="el-icon-office-building"></i>
                        </div>
                    </div>

                    <div class="login-title">
                        <h2>欢迎登录楼宇管理系统</h2>
                        <p>微水出品,必属精品</p>
                    </div>
                </div>

                <div class="form-container">
                    <div class="form-item">
                        <label for="username">用户名</label>
                        <div class="input-container">
                            <i class="el-icon-user input-icon"></i>
                            <input
                                    type="text"
                                    id="username"
                                    class="custom-input"
                                    v-model="user.username"
                                    placeholder="请输入用户名"
                                    autocomplete="username"
                            >
                        </div>
                    </div>

                    <div class="form-item">
                        <label for="password">密码</label>
                        <div class="input-container">
                            <i class="el-icon-lock input-icon"></i>
                            <div class="password-container">
                                <input
                                        :type="showPassword ? 'text' : 'password'"
                                        id="password"
                                        class="custom-input"
                                        v-model="user.password"
                                        placeholder="请输入密码"
                                        autocomplete="current-password"
                                >
                                <span class="password-toggle" @click="showPassword = !showPassword">
                                <i :class="showPassword ? 'el-icon-view' : 'el-icon-view'"></i>
                            </span>
                            </div>
                        </div>
                    </div>

                    <div class="remember-me">
                        <div
                                class="remember-checkbox"
                                :class="{checked: user.rememberMe}"
                                @click="user.rememberMe = !user.rememberMe"
                        ></div>
                        <span class="remember-label" @click="user.rememberMe = !user.rememberMe">记住我</span>
                    </div>

                    <button class="login-btn" @click="handleLogin">登录</button>
                </div>

                <div class="copyright">
                    © 2023 楼宇管理系统
                </div>
            </div>
        </div>
    </div>
    </div>


<script>
    const {createApp, ref, reactive, onMounted} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;

    const app = createApp({
        setup() {
            const user = ref({
                username: '',
                password: '',
                rememberMe: false
            });

            const showPassword = ref(false);

            // 获取表单引用
            const loginForm = ref(null);

            // 登录按钮功能
            const handleLogin = () => {
                if (!user.value.username) {
                    ElMessage.warning('用户名不能为空');
                    return;
                }

                if (!user.value.password) {
                    ElMessage.warning('密码不能为空');
                    return;
                }

                axios.post(`/user/login`, user.value)
                    .then(resp => {
                        if (resp.data.code === 200) {
                            ElMessage.success({
                                message: resp.data.msg,
                                duration: 1500,
                                onClose: () => {
                                    window.location.href = "http://localhost:8080/main.html";
                                }
                            });
                        } else {
                            ElMessage.error(resp.data.msg);
                        }
                    })
                    .catch(error => {
                        ElMessage.error(error.response?.data?.msg || '登录失败，请稍后重试');
                    });
            };

            // 表单验证规则
            const rules = ref({
                username: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '密码不能为空', trigger: 'blur'},
                    {min: 4, message: '密码长度不能少于4位', trigger: 'blur'}
                ]
            });

            // 创建背景粒子效果
            const createParticles = () => {
                const container = document.getElementById('particles');
                const particleCount = 20;

                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('particle');

                    // 随机大小
                    const size = Math.random() * 50 + 10;
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;

                    // 随机位置
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.top = `${Math.random() * 100}%`;

                    // 随机动画延迟
                    particle.style.animationDelay = `${Math.random() * 15}s`;

                    // 随机透明度
                    particle.style.opacity = Math.random() * 0.3 + 0.1;

                    container.appendChild(particle);
                }
            };

            onMounted(() => {
                createParticles();

                // 尝试从本地存储获取记住的用户名
                const rememberedUser = localStorage.getItem('rememberedUser');
                if (rememberedUser) {
                    user.value.username = rememberedUser;
                    user.value.rememberMe = true;
                }
            });

            return {
                rules,
                user,
                loginForm,
                showPassword,
                handleLogin
            };
        }
    });

    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });

    // 注册 Element Plus 图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }

    app.mount("#app");
</script>
</body>

</html>